<template>
  <div class="wrapper">
    <template>
      <div class="title">请选择退款原因</div>
      <ul class="box">
        <li
          v-for="item in guageList"
          :class="{current: item === guage}"
          @click="pickGuage(item)"
          :key="item"
        >
          {{ item }}
        </li>
      </ul>
      <button class="add" @click="submit">提交</button>
    </template>
    <template>
      
    </template>
  </div>
</template>

<script>
  import _ from 'lodash'
  import { mapState } from 'vuex'
  export default {
    name: 'GoodsDialog',
    created() {
      this._get()
    },
    data() {
      return {
        guageList: ['不想要了', '我按错了','退款想买别的'],
        guage: '',
        detail: {}
      }
    },
    computed: {
      ...mapState(['openId', 'userState']),
      apiUrl() {
        return this.userState == 0 ? '/v1/merchant/show' : '/v1/platform/show'
      }
    },
    methods: {
      async _get() {
        let { data: { code, data } } = await this.$axios({
          url: this.apiUrl,
          method: 'GET',
          params: {
            order_code: this.$route.params.id,
            openid: this.openId
          }
        })
        if(code === 0) {
          this.detail = data
        }
      },
      pickGuage(guage) {
        if(this.guage === guage) {
          this.guage = ''
          return
        }
        this.guage = guage
      },
      submit() {
        if(!this.guage) {
          this.$toast('请选择原因')
          return
        }
        this._submit()
      },
      _submit: _.throttle(async function() {
        let formData = new FormData()
        formData.append('totalFee', this.detail[0].subtotal)
        formData.append('refundFee', this.detail[0].subtotal)
        // formData.append('orderid', this.detail[0].id)
        formData.append('orderNo', this.$route.params.id)
        formData.append('openid', this.openId)
        let { data: { code, data } } = await this.$axios({
          url: '/v1/wexin/refund',
          method: 'POST',
          data: formData
        })
        if(code === 0 && data) {
          this.$toast(data)
          setTimeout(() => {
            this.$router.replace({
              name: 'Center'
            })
          }, 1500)
        }
      }, 2000, { trailing: false })
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/base.scss';
  .wrapper {
    min-height: 100vh;
    background: #eee;
    padding-top: 0.2rem;
    .title {
      padding:0.2rem;
      font-size: 0.28rem;
      background: #fff;
    }
    .box {
      background: #fff;
      padding: 0.2rem;
      li {
        display: inline-block;
        margin: 0.1rem 0.2rem 0.1rem 0;
        padding: 0.1rem;
        background: $bgGray;
        border-radius: 5px;
        &.current {
          background: $colorRed;
          color: #fff;
        }
      }
    }
    .add {
      display: block;
      margin: 0.4rem auto;
      width: 80%;
      padding: 0.2rem;
      border: none;
      border-radius: 5px;
      background: $colorRed;
      color: #fff;
    }
  }
</style>
